<template>
  <!-- 触发器页面 -->
  <div>
    <div style="position: relative" class="border_tb">
      <el-form
        class="main_fun"
        ref="customFuncForm"
        :model="customFuncForm"
        :rules="customFuncFormRules"
        :label-position="lablePosition"
        label-width="50px"
        size="mini"
        style="margin-top: 1px"
      >
        <el-form-item label="名称" prop="name">
          <el-input v-model="customFuncForm.name"></el-input>
        </el-form-item>
        <el-form-item label="脚本类型" prop="jsType">
          <el-select v-model="customFuncForm.jsType" style="width: 100%">
            <el-option label="Javascript" value="JAVASCRIPT"></el-option>
            <el-option label="Scala" value="SCALA"></el-option>
            <el-option label="R" value="R"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="返回类型" prop="returnType">
          <el-select v-model="customFuncForm.returnType" style="width: 100%">
            <el-option label="int" value="INT"></el-option>
            <el-option label="long" value="LONG"></el-option>
            <el-option label="double" value="DOUBLE"></el-option>
            <el-option label="float" value="FLOAT"></el-option>
            <el-option label="string" value="STRING"></el-option>
            <el-option label="bool" value="BOOL"></el-option>
            <el-option label="object" value="OBJECT"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="脚本内容">
          <el-input
            class="textarea_small"
            type="textarea"
            v-model="customFuncForm.scriptContent"
            rows="5"
          ></el-input>
          <div class="full_title" @click="openFullscreen">
            <img src="@/assets/zhankai.png" alt="" />
            <span> 全屏输入 </span>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <!-- 底部操作按钮 -->
    <foot-operation-button
      @submit="submit"
      @handClose="handClose"
      style="margin-right: 20px"
    />
    <!-- 抽屉 -->
    <el-drawer
      title="脚本内容"
      :append-to-body="true"
      :visible.sync="innerDrawer"
      :size="drawersize"
    >
      <!-- 抽屉内文本框 -->
      <div>
        <el-form ref="scriptForm" :model="functionScript" size="mini">
          <el-form-item>
            <el-input
              class="textarea_big"
              type="textarea"
              v-model="functionScript.content"
              rows="28"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div align="right" style="margin-right: 15px">
        <!-- <el-button type="info" plain size="mini">删除</el-button> -->
        <el-button type="info" plain size="mini" @click="cancelScript"
          >取消</el-button
        >
        <el-button type="primary" size="mini" @click="returnScript"
          >确定</el-button
        >
      </div>
    </el-drawer>
  </div>
</template>

<script>
import FootOperationButton from "../CommonComponents/FootOperationButton";
export default {
  components: {
    FootOperationButton,
  },
  props: {
    nodeDataRight: {
      type: Object,
      default: () => {},
    },
    keyNumber: { type: Number },
  },
  data() {
    return {
      customFuncList_obj: {},
      lablePosition: "top",
      input_show: false,
      customFuncForm: {
        name: "",
        jsType: "Javascript",
        returnType: "int",
        scriptContent: "",
      },
      customFuncFormRules: {
        trigger: [{ required: true }],
        name: [
          { required: true, message: "名称不能为空", trigger: "blur" },
          { pattern: /^[A-Za-z]/, message: "名称必须以字母开头" },
        ],
      },
      innerDrawer: false,
      drawersize: "570px",
      functionScript: { content: "" },
    };
  },
  watch: {
    nodeDataRight: {
      handler: function (newData, oldData) {
        if ("" !== newData && newData != undefined) {
          this.customFuncList_obj = newData;
          this.customFuncForm.name = this.customFuncList_obj.name;
          this.customFuncForm.jsType = this.customFuncList_obj.scriptType;
          this.customFuncForm.returnType = this.customFuncList_obj.returnType;
          this.customFuncForm.scriptContent = this.customFuncList_obj.body;
          if (
            this.customFuncList_obj.previousCommentSegment != undefined &&
            this.customFuncList_obj != ""
          ) {
            this.customFuncList_obj.previousCommentSegment.content =
              "\n \n \n \n \n \n \n";
          }
        }
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {},
  methods: {
    submit() {
      this.$refs.customFuncForm.validate((valid) => {
        if (valid) {
          this.customFuncList_obj.name = this.customFuncForm.name;
          this.customFuncList_obj.scriptType = this.customFuncForm.jsType;
          this.customFuncList_obj.returnType = this.customFuncForm.returnType;
          this.customFuncList_obj.body = this.customFuncForm.scriptContent;
          let returnData = {
            display: false,
            type: "functionList",
            objectState: this.nodeDataRight.objectState,
            nodeData: this.customFuncList_obj,
            nodeDataRight: this.nodeDataRight,
          };
          this.$emit("returnSource", returnData);
        } else {
          return false;
        }
      });
    },
    openFullscreen() {
      this.innerDrawer = true;
      this.functionScript.content = this.customFuncForm.scriptContent;
    },
    //关闭-取消
    handClose() {
      this.$emit("handClose");
    },
    handleClose(done) {
      this.$confirm("确定关闭吗？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    cancelScript() {
      this.innerDrawer = false;
    },
    returnScript() {
      this.innerDrawer = false;
      this.customFuncForm.scriptContent = this.functionScript.content;
    },
  },
};
</script>
<style scoped lang='scss'>
.full_title {
  float: right;
  font-size: 12px;
  color: #999999;
  display: flex;
  align-items: center;
  cursor: pointer;
  img {
    width: 10px;
    height: 10px;
    margin-right: 6px;
  }
}
.border_tb {
  border-top: 1px solid #e4e4e4;
  border-bottom: 1px solid #e4e4e4;
}
.main_fun {
  padding: 0 20px;
  padding-top: 10px;
  height: calc(100vh - 140px);
}
.textarea_big {
  /* margin: 0px 10px 0px 10px; */
  padding: 10px;
}
</style>
